<script setup>
import { ref } from 'vue';
import { doPost } from '@/http/api';
const initialModel = {
    keyword: '',
    page: 1,
    size: 5,
    total: 0
}
const model = ref({ ...initialModel })

const dataModel = {
    uid: 0,
    name: '',
    gender: '',
}
const dmodel = ref({ ...dataModel })
const showAdd = ref(false)
const showEdit = ref(false)
const list = ref([])
const pages = ref(0)

async function getUserList() {
    const data = await doPost('/get_user_list', { ...model.value })
    list.value = data.list
    model.value.total = data.total
    let totalPage = Math.floor(data.total / model.value.size)
    if (data.total % model.value.size > 0) {
        totalPage = totalPage + 1
    }
    pages.value = totalPage

}

function pre() {
    model.value.page-=1
    getUserList()
}
function next() {
    model.value.page+=1
    getUserList()
}
function pagechange(i) {
    model.value.page=i
    getUserList()
}

function editUserForm(item) {
    showEdit.value = true
    dmodel.value.uid = item.uid
    dmodel.value.name = item.name
    dmodel.value.gender = item.gender
}

function addUserForm() {
    showAdd.value = true
    dmodel.value.uid = dataModel.uid
    dmodel.value.name = dataModel.name
    dmodel.value.gender = dataModel.gender
}


function addUser() {
    const params = {
        name: dmodel.value.name,
        gender: dmodel.value.gender,
    }
    doPost('/add_user', params)
    setTimeout(() => {
        getUserList()
        showAdd.value = false
    }, 1000)

}

function editUser() {
    const params = {
        uid: dmodel.value.uid,
        name: dmodel.value.name,
        gender: dmodel.value.gender,
    }
    doPost('/edit_user', params)
    setTimeout(() => {
        getUserList()
        showEdit.value = false
    }, 1000)
}
getUserList()
</script>

<template>
    <div class="relative flex w-full aspect-video justify-center">
        <div class="relative w-1/2 h-1/3 top-10">
            <div class="relative">
                <button class="bg-blue-600" @click="addUserForm">Add User</button>
            </div>
            <div class="relative ">
                <table class="table-auto border-collapse border border-slate-900">
                    <thead>
                        <tr>
                            <th class="border border-slate-900 text-2xl w-20 h-10">id</th>
                            <th class="border border-slate-900 text-2xl w-40 h-10">name</th>
                            <th class="border border-slate-900 text-2xl w-40 h-10">gender</th>
                            <th class="border border-slate-900 text-2xl w-60 h-10">option</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, i) in list">
                            <td class="border border-slate-900 text-lg">{{ item.uid }}</td>
                            <td class="border border-slate-900 text-lg">{{ item.name }}</td>
                            <td class="border border-slate-900 text-lg">{{ item.gender }}</td>
                            <td class="border border-slate-900 text-lg text-center"><button class="bg-neutral-400"
                                    @click="editUserForm(item)">edit</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="relative">
                <i v-if="model.page !== 1" @click="pre">< </i>
                    <i class="m-2" v-for="i in pages">
                        <span class="text-blue-400" v-if="model.page === i" @click="pagechange(i)">{{ i }}</span>
                        <span v-if="model.page !== i" @click="pagechange(i)">{{ i }}</span>
                    </i>
                <i v-if="model.page !== pages" @click="next">></i>
            </div>
        </div>

        <div v-if="showAdd" class="fixed box-border space-y-2 h-320 w-320 p-4 border-4 bg-slate-600">
            Name:<br /><input type="text" v-model="dmodel.name" /><br />
            Gender:<br />
            <select v-model="dmodel.gender">
            <option value="male">male</option>
            <option value="female">female</option>
            </select><br />
            <button class="relative bg-blue-200" @click="() => showAdd = false">取消</button>
            <button class="relative left-3 bg-blue-300" @click="addUser">提交</button>
        </div>

        <div v-if="showEdit" class="fixed box-border space-y-2 h-320 w-320 p-4 border-4 bg-slate-600">
            Name:<br /><input type="text" v-model="dmodel.name" /><br />
            Gender:<br /><select v-model="dmodel.gender">
            <option value="male">male</option>
            <option value="female">female</option>
            </select><br />
            <button class="relative bg-blue-200" @click="() => showEdit = false">取消</button>
            <button class="relative left-3 bg-blue-300" @click="editUser">提交</button>
        </div>
    </div>
</template>